<!--可编辑文本区域组件 - 功能介绍
描述：
该Vue组件提供了一个可编辑的文本区域，根据不同的参数类型，自动切换输入框样式，支持日期时间选择、普通文本输入等，适用于需要在前端输入不同类型参数的场景。

属性：

paramType：参数类型，用于确定输入框的样式，支持不同的日期时间格式等。
dialogTitle：对话框标题，默认为"参数输入"。
inputLabel：输入框标签，默认为"请输入"。
inputPlaceholder：输入框占位符，默认为"请输入"。
text：文本区域的内容。
default_text：默认文本，在没有内容时显示的提示。
width：输入框宽度。
minWidth：最小宽度，如果设置为"1"，当输入框内容长度小于宽度时，应用最小宽度样式。
bigInput：是否应用大输入框样式。
事件：
send-to-parent：自定义事件，传递输入框的值和类型给父组件。
/>-->


<template>
    <!-- 定义一个span元素，绑定点击事件为showDialog方法 -->
    <span @click="showDialog">
        <!-- 如果有text属性，则显示一个文本域，并根据参数类型设置样式 -->
        <el-textarea v-if="text" :style="getTextAreaStyle()">{{ text }}</el-textarea>
        <!-- 如果参数类型以YYYY-MM-DD HH:mm:ss开头，则显示年月日时分秒的占位符 -->
        <span
            v-else-if="paramType.startsWith('YYYY-MM-DD HH:mm:ss')">&emsp;&emsp;年&emsp;月&emsp;日&emsp;时&emsp;分&emsp;秒</span>
        <!-- 如果参数类型以YYYY-MM-DD HH:mm开头，则显示年月日时分的占位符 -->
        <span v-else-if="paramType.startsWith('YYYY-MM-DD HH:mm')">&emsp;&emsp;年&emsp;月&emsp;日&emsp;时&emsp;分</span>
        <!-- 如果参数类型以YYYY-MM-DD HH开头，则显示年月日时的占位符 -->
        <span v-else-if="paramType.startsWith('YYYY-MM-DD HH')">&emsp;&emsp;年&emsp;月&emsp;日&emsp;时</span>
        <!-- 如果参数类型以YYYYMMDD开头，则显示年月日的占位符 -->
        <span v-else-if="paramType.startsWith('YYYYMMDD')">&emsp;&emsp;年&emsp;月&emsp;日</span>
        <!-- 如果参数类型以YYYYMM开头，则显示年月的占位符 -->
        <span v-else-if="paramType.startsWith('YYYYMM')">&emsp;&emsp;年&emsp;月</span>
        <!-- 如果参数类型以YYYY开头，则显示年的占位符 -->
        <span v-else-if="paramType.startsWith('YYYY')">&emsp;&emsp;年</span>
        <!-- 如果参数类型以HH:mm开头，则显示时分的占位符 -->
        <span v-else-if="paramType.startsWith('HH:mm')">&emsp;时&emsp;分</span>
        <!-- 其他情况下，显示一个文本域，样式为反向排列 -->
        <el-textarea v-else style="flex-direction: row-reverse">
            <!-- 如果有default_text属性，则显示带下划线的文本 -->
            <span v-if="default_text" class="underline">{{ default_text }}</span>
            <!-- 否则，显示一个带下划线的输入框，并根据width属性设置宽度 -->
            <input v-else class="underline" :style="{ width: width }">
        </el-textarea>
    </span>
    <!-- 定义一个对话框元素，绑定v-model为dialogVisible，title为dialogTitle，width为45%，class为my-custom-dialog -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px" style="text-align: left">
        <!-- 定义一个表单元素，绑定model为form，label-width为auto -->
        <el-form :model="form" label-width="auto">
            <!-- 定义一个表单项元素，绑定label为inputLabel -->
            <el-form-item :label="inputLabel">
                <!-- 如果参数类型以v开头，并且bigInput属性为1，则显示一个多行文本输入框，并设置自动调整大小、v-model、占位符和宽度 -->
                <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 6 }"
                    v-if="paramType.startsWith('v') && bigInput === '1'" v-model="form.input" placeholder="请输入"
                    style="width: 100%"></el-input>
                <!-- 如果参数类型以v开头，并且bigInput属性不为1，则显示一个单行文本输入框，并设置v-model和占位符 -->
                <el-input v-else-if="paramType.startsWith('v')" v-model="form.input"
                    :placeholder="inputPlaceholder"></el-input>
                <!-- 如果参数类型以YYYY-MM-DD HH:mm:ss开头，则显示一个日期时间选择器，并设置v-model、value-format、type、style和clearable -->
                <div v-else-if="paramType.startsWith('YYYY-MM-DD HH:mm:ss')" style="width: 100%;text-align: left">
                    <el-date-picker v-model="form.input" value-format="YYYY年MM月DD日HH时mm分ss秒" type="datetime"
                        style="width: 90%" clearable />
                </div>
                <!-- 如果参数类型以YYYY-MM-DD HH:mm开头，则显示一个日期时间选择器，并设置v-model、value-format、type、style和clearable -->
                <div v-else-if="paramType.startsWith('YYYY-MM-DD HH:mm')" style="width: 100%;text-align: left">
                    <el-date-picker v-model="form.input" value-format="YYYY年MM月DD日HH时mm分" type="datetime"
                        style="width: 90%" clearable />
                </div>
                <!-- 如果参数类型以YYYY-MM-DD HH开头，则显示一个日期时间选择器，并设置v-model、value-format、type、style和clearable -->
                <div v-else-if="paramType.startsWith('YYYY-MM-DD HH')" style="width: 100%;text-align: left">
                    <el-date-picker v-model="form.input" value-format="YYYY年MM月DD日HH时" type="datetime"
                        style="width: 90%" clearable />
                </div>
                <!-- 如果参数类型以YYYYMMDD开头，则显示一个日期选择器，并设置v-model、value-format、type、style和clearable -->
                <el-date-picker v-else-if="paramType.startsWith('YYYYMMDD')" v-model="form.input"
                    value-format="YYYY年MM月DD日" type="date" style="width: 90%" clearable />
                <!-- 如果参数类型以YYYYMMDD开头，则显示一个日期选择器，并设置v-model、value-format、type、style和clearable -->
                <el-date-picker v-else-if="paramType.startsWith('YYYYMM')" v-model="form.input" value-format="YYYY年MM月"
                    type="date" style="width: 90%" clearable />
                <!-- 如果参数类型以YYYY开头，则显示一个年份选择器，并设置v-model、value-format、type、style和clearable -->
                <el-date-picker v-else-if="paramType.startsWith('YYYY')" v-model="form.input" value-format="YYYY年"
                    type="year" style="width: 90%" clearable />
                <!-- 如果参数类型以HH:mm开头，则显示一个时间选择器，并设置v-model、value-format、type、style和clearable -->
                <div v-else-if="paramType.startsWith('HH:mm')" style="width: 100%;text-align: left">
                    <el-time-picker v-model="form.input" value-format="HH时mm分" type="time" style="width: 90%"
                        clearable />
                </div>
            </el-form-item>
        </el-form>
        <!-- 定义一个对话框底部元素，绑定slot为footer，class为dialog-footer -->
        <span slot="footer" class="dialog-footer">
            <!-- 显示一个取消按钮，绑定点击事件为closeDialog方法 -->
            <el-button @click="closeDialog">取消</el-button>
            <!-- 显示一个确定按钮，绑定点击事件为updateText方法 -->
            <el-button type="primary" @click="updateText">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    // 定义组件的选项
    components: {},
    props: {
        paramType: {
            type: String,
            default: ""
        },
        dialogTitle: {
            type: String,
            default: "参数输入"
        },
        inputLabel: {
            type: String,
            default: "请输入"
        },
        inputPlaceholder: {
            type: String,
            default: "请输入"
        },
        text: {
            type: String,
            default: ""
        },
        default_text: {
            type: String,
            default: ""
        },
        width: {
            type: String,
            default: "10px"
        },
        minWidth: {
            type: String,
            default: 0 // 设置默认值为 false，表示不应用最小宽度样式
        },
        bigInput: {
            type: String,
            default: 0 // 设置默认值为 false，表示不应用最小宽度样式
        },
    },
    data() {
        // 定义组件的数据
        return {
            // 对话框是否可见
            dialogVisible: false,
            // 表单的数据
            form: {
                input: "",
                type: ""
            }
        };
    },
    methods: {
        // 定义组件的方法
        // 显示对话框，并把text和paramType赋值给form
        showDialog() {
            this.dialogVisible = true;
            this.form.input = this.text;
            this.form.type = this.paramType;
        },
        // 关闭对话框
        closeDialog() {
            this.dialogVisible = false;
        },
        // 更新文本，并把form的input和type通过自定义事件发送给父组件，然后关闭对话框
        updateText() {
            this.$emit("send-to-parent", this.form.input, this.form.type);
            this.closeDialog();
        },
        // 根据参数类型获取文本域的样式
        getTextAreaStyle() {
            // 如果参数类型是日期或时间，则返回空
            if (this.paramType.startsWith('YYYY') ||
                this.paramType.startsWith('YYYYMM') ||
                this.paramType.startsWith('YYYYMMDD') ||
                this.paramType.startsWith('YYYY-MM-DD HH') ||
                this.paramType.startsWith('YYYY-MM-DD HH:mm') ||
                this.paramType.startsWith('YYYY-MM-DD HH:mm:ss') ||
                this.paramType.startsWith('HH:mm')) {
                return null;
            }
            // 定义基本样式，包括下边框
            const baseStyle = {
                'border-bottom': '1px solid black',
            };

            // 如果minWidth属性为1，并且输入的长度小于宽度除以16，则设置最小宽度、显示方式和盒子模型
            if (this.minWidth === '1' && this.form.input.length < parseInt(this.width) / 16) {
                baseStyle['min-width'] = this.width;
                baseStyle['display'] = 'inline-block';
                baseStyle['box-sizing'] = 'border-box';
            }
            // 返回样式对象
            return baseStyle;
        },
    }
};
</script>

<style scoped>
/* 设置文本区域的样式 */
.textarea {
    border: 1px solid black;
    width: 592px;
    height: 30px;
    display: flex;
    align-items: center;
    padding-left: 10px;
}

.underline {
    border-bottom: 1px solid black;
    color: #D3D3D3;
}

input {
    text-align: center;
    font-size: 90%;
    background: none;
    outline: none;
    padding: 0;
    border: 0;
}
</style>
